<template>
  <div class="kfm_article">
    <div :class="{'kfm_article-container':isItem,'kfm_article-placeholder':!isItem}">
      <anthology-list class="anthology-list" @getArticle=getArticle ></anthology-list>
      <article-list class="article_container" :items=items></article-list>
    </div>
    <coffee-footer></coffee-footer>
  </div>
</template>

<script>
  import coffeeFooter from '../../footer';
  import articleList from '../articleList/articleList';
  import anthology from '../content/anthology';
  import API from '../../API';
  export default {
    name: "kfm_article",
    data:function(){
      return {
        items:[],
        isItem:false
      }
    },
    methods:{
      getArticle:function (items) {
        this.items = items;
        const length = items.length;
        for(let i=0;i<length;i++){
          API.post.getArticle({id:this.items[i].id}).
          then((res)=>{
            const {result} = res.data;
            this.$set(this.items[i], 'content',result);
            this.setIsItem();
          })
        }
      },
      setIsItem(){
        this.isItem = true;
      }
    },
    components:{
      'article-list': articleList,
      'anthology-list':anthology,
      'coffee-footer':coffeeFooter
    }
  }
</script>

<style scoped lang="less">

  @import '../../static/less/footer';
  @import '../../static/less/nav';

  .kfm_article{
    position: relative;
    height: calc(100% - @navHeight);
  }


  @percentContainer:80%;
  @percentLeftRight:(100% - @percentContainer)/2;
  .kfm_article-container{
    position: relative;
    height: 100%;
    max-width: 1000px;
    width: @percentContainer;
    margin: 0 auto;
  }
  .kfm_article-placeholder{
    position: relative;
    height: 100%;
    max-width: 1000px;
    width: @percentContainer;
    margin: 0 auto;
  }
  @width : 200px;
  .anthology-list{
    position: absolute;
    width: @width;
  }
  .article_container{
    position: absolute;
    margin-left: @width;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }



</style>
